<script setup lang="ts">
import { onMounted, ref } from "vue"
import MainTable from './table.vue'
import EchartVue from './echart.vue';

import { useorderStatic } from '@/stores/orderStatic'

const _orderList = useorderStatic()

const today = ref(0)
const yesterday = ref(0)
const staticList = ref([])

onMounted(async () => {
  await _orderList.getorderList()
  staticList.value = _orderList.orderStatic
  test()
})

const test = () => {
  staticList.value.forEach((item) => {
    if ((item.time.split(' ')[0].split('-')[2]) * 1 == (String(new Date(Date.now()).getDate()).padStart(2, "0")) * 1) {
      today.value++
    } else if ((item.time.split(' ')[0].split('-')[2]) * 1 == ((String(new Date(Date.now()).getDate()).padStart(2, "0")) * 1) - 1) {
      yesterday.value++
    }
  })
}

</script>
<template >
  <n-layout>
    <n-layout-header>订单统计</n-layout-header>
  </n-layout>
  <n-row class="row" gutter="12">
    <n-col :span="11">
      <div class="top_left"><span class="shu">&nbsp;</span> 订单统计（单）</div>
      <div>
        <n-row gutter="8">
          <n-col :span="8">
            <div class="green" style="background-color: #8c99fa;">
              <n-space vertical class="space">
                <span>今日</span>
                <span class="font">{{ today }}</span>
              </n-space>
            </div>
          </n-col>
          <n-col :span="8">
            <div class="green" style="background-color: #f97d5f;">
              <n-space vertical class="space">
                <span>昨日</span>
                <span class="font">{{ yesterday }}</span>
              </n-space>
            </div>
          </n-col>
          <n-col :span="8">
            <div class="green" style="background-color: #fcc164;">
              <n-space vertical class="space">
                <span>近7日</span>
                <span class="font">120</span>
              </n-space>
            </div>
          </n-col>
        </n-row>
      </div>
    </n-col>
    <n-col :span="11" class="col_right">
      <div class="top_left"><span class="shu">&nbsp;</span> 营业额统计 (元)</div>
      <div>
        <n-row gutter="8">
          <n-col :span="8">
            <div class="green" style="background-color: #8c99fa;">
              <n-space vertical class="space">
                <span>今日</span>
                <span class="font">{{ today * 500 }}</span>
              </n-space>
            </div>
          </n-col>
          <n-col :span="8">
            <div class="green" style="background-color: #f97d5f;">
              <n-space vertical class="space">
                <span>昨日</span>
                <span class="font">{{ yesterday * 500 }}</span>
              </n-space>
            </div>
          </n-col>
          <n-col :span="8">
            <div class="green" style="background-color: #fcc164;">
              <n-space vertical class="space">
                <span>近7日</span>
                <span class="font">201</span>
              </n-space>
            </div>
          </n-col>
        </n-row>
      </div>
    </n-col>
  </n-row>
  <!--  -->
  <EchartVue />
  <MainTable />
</template>



<style scoped>
.jinri {
  margin-left: -18px;
}

.n-layout-header {
  background-color: #e9eff5;
  height: 45px;
  padding: 15px;
}

.n-button {
  background-color: #fff;
}

.row {
  background-color: #fff;
  padding: 15px;
}

.shu {
  background-color: red;
}

.top_left {
  border-bottom: 1px solid #ccc;
  padding-bottom: 5px;
}

.col_right {
  margin-left: 60px;
}

.green {
  height: 108px;
  background-color: rgba(0, 128, 0, 0.24);
  margin: 15px 0;
  border-radius: 5px;
  color: #fff;
}

.space {
  padding: 18px;
}

.font {
  font-size: 30px;
}

.n-date-picker {
  width: 300px;
}

.layout_content {
  padding: 20px 15px;
  line-height: 34px;
  border-bottom: 1px solid #ccc;
}

.chaxun {
  right: -187px;
}
</style>